<style>
    .layui-form-label {
        text-align: left;
    }
</style>
<title>角色添加</title>
<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>角色</cite></a>
        <a><cite>角色列表</cite></a>
        <a><cite>添加角色</cite></a>
    </div>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-spacel5">
        <div class="layui-card">
            <div class="layui-card-header">添加角色</div>
            <div class="layui-card-body" style="padding: 15px;">
                <form class="layui-form" action="" lay-filter="component-form-group">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label required">角色名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="roleName" lay-verify="required|roleName" autocomplete="off"
                                       placeholder="请输入角色名称" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">角色编码</label>
                            <div class="layui-input-inline">
                                <input type="text" name="roleCode" autocomplete="off" placeholder="请输入角色编码"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">所属部门</label>
                            <div class="layui-input-inline">
                                <input type="hidden" name="deptId" id="deptId">
                                <input type="text" name="deptName" id="deptName" autocomplete="off" placeholder="请选择所属部门"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">角色类型</label>
                            <div class="layui-input-block">
                                <select name="roleType" lay-verify="required">
                                    <option value="1">管理员</option>
                                    <option value="2">普通角色</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">状态</label>
                            <div class="layui-input-block">
                                <select name="status" lay-verify="required">
                                    <option value="0">有效</option>
                                    <option value="1">无效</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">描述</label>
                        <div class="layui-input-block">
                            <textarea type="text" name="roleDesc" placeholder="描述" class="layui-textarea"></textarea>
                        </div>
                    </div>
                    <div class="layui-form-item" style="text-align: right">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit="" lay-filter="component-form-ts-role">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            <a lay-href="/role/list" class="layui-btn layui-btn-primary">
                                <i class="layui-icon layui-icon-return"></i>返回
                            </a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<style>
    .liactive{
        background: #1E9FFF;
    }
</style>
<script>
    layui.use(['admin', 'form', 'laydate', 'tree', 'common'], function () {
        var $ = layui.$, admin = layui.admin, element = layui.element
                , layer = layui.layer
                , laydate = layui.laydate
                , form = layui.form, basePath = layui.common.basePath;
        var $deptId=null,$deptName=null;
        form.render(null, 'component-form-group');
        laydate.render({
            elem: '#LAY-component-form-group-date'
        });
        /* 监听提交 */
        form.on('submit(component-form-ts-role)', function (data) {
            admin.req({
                url: basePath + 'system/tsRole/add.do' //实际使用请改成服务端真实接口
                , data: data.field
                , type: 'get'
                , done: function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg, {
                            offset: '15px'
                            , icon: 1
                            , time: 1000
                        }, function () {
                            location.hash = '/role/list';
                        });
                    } else {
                        layer.msg(res.msg, {
                            offset: '15px'
                            , icon: 2
                            , time: 1000
                        }, function () {
                        });
                        return;
                    }
                }, success: function (res) {
                    console.log(res)
                }, error: function (res) {
                    console.log(res)
                }
            });
            return false;
        });

        $("#deptName").on('click',function () {
            layer.open({
                type: 1,
                area:['400px','400px'],
                title:'选择所属部门',
                zIndex:layer.zIndex+1,
                scrollbar:true,
                btn:['确定','取消'],
                content: '<div class="layui-tree" id="dept_tree"></div>', //注意，如果str是object，那么需要字符拼接。
                yes:function (index, layero) {
                    if($deptId == null) {
                        layer.msg("请选择所属部门");
                        return;
                    }
                    $("#deptId").val($deptId);
                    $("#deptName").val($deptName);
                    layer.close(index);
                },
                btn2:function (index) {
                    $deptId = null;
                    $deptName = null;
                    layer.close(index);
                },
                cancel:function () {
                    $deptId = null;
                    $deptName = null;
                }

            });

            $.post(basePath+'system/tsDept/getDeptAndChildDepts.do', {access_token: layui.data('layuiAdmin').access_token}, function(data){
                var dataObj = eval ("(" + data + ")");
                layui.tree({
                    elem: '#dept_tree'
                    ,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
                    ,click: function(node){
                        $deptId = node.id;
                        $deptName = node.name;
                    }
                    ,nodes: dataObj
                });
            });

        });

        $("body").on("mousedown",".layui-tree a",function(){
            $(".layui-tree a cite").parent().removeClass('liactive') ; //css('color','#333');
            $(this).find('cite').parent().addClass('liactive'); //.css('color','red');
        });

    });


</script>